<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            text-align: center;
            background: #000;
            color: #fff;
        }

        .wrap {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(2);
            width: 500px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .button {
            width: 100px;
            height: 40px;
            border: none;
            outline: none;
            background: #fff;
            border-radius: 3px;
        }

        .wrap .times {
            font-size: 100px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="btns">
            <button class="button" onclick="start()">开始</button>
            <button class="button Continue" onclick="Continue()">继续上次</button>
        </div>
        <div class="times">
            <span id="hour">2</span> :
            <span id="minu">30</span> :
            <span id="seco">00</span>
        </div>
    </div>
</body>
<script>
    var localTime = localStorage.getItem('leftTime');
    if (localTime === null || localTime === '') {

        var oContinue = document.getElementsByClassName('Continue')[0];

        oContinue.style.display = 'none';
    }

    function start() {
        var curTime = new Date().getTime(),
            endTime = new Date().getTime() + 9000000, // 现在开始后的两个半小时的时间
            oBtns = document.getElementsByClassName('btns')[0],
            flag = true,
            leftTime;

        if (flag) {

            flag = false; // Can't double clicking
            oBtns.style.visibility = 'hidden';

            setInterval(function () {
                // 现在时间
                curTime = new Date().getTime();
                leftTime = endTime - curTime;

                calcTimes(leftTime);

            }, 200); // interval of end

        } // flag of end

    } // start time of end


    function Continue() {
        var localTime = localStorage.getItem('leftTime'),
            oBtns = document.getElementsByClassName('btns')[0],
            flag = true;

        if (flag) {

            flag = false; // Can't double clicking
            oBtns.style.visibility = 'hidden';

            setInterval(function () {
                localTime -= 1000;
                calcTimes(localTime);
            }, 1000); // Interval of end

        } // flag of end

    }

    function calcTimes(left) {

        var oHour = document.getElementById('hour'),
            oMinu = document.getElementById('minu'),
            oSeco = document.getElementById('seco');

        if (left > 0) {

            var h = Math.floor(left / 1000 / 60 / 60 % 60),
                m = Math.floor(left / 1000 / 60 % 60),
                s = Math.floor(left / 1000 % 60);

            function addZero(num) {
                if (num < 10) {
                    return '0' + num;
                } else {
                    return num;
                }
            } // addZero of end

            //  把时间存储到存储到本地
            localStorage.setItem('leftTime', left);

            oHour.innerHTML = h;
            oMinu.innerHTML = addZero(m);
            oSeco.innerHTML = addZero(s);

        } else {

            alert('时间到');
            location.go(0);
            localStorage.setItem('leftTime', '');

        } // leftTime of end
    }
</script>

</html>